<template>
	<view class="service-page">
		<!-- 顶部 -->
		<view class="service-page-top">
			<view class="search-item">
				<input class="search-item__input" confirm-type="search" placeholder="搜索你感兴趣的..."
					placeholder-style="color:#B2B2B2" />
				<image class="search-item__icon" src="../../static/images/search.png" alt="" />
			</view>
			<view class="filter-item" @click="show = true">
				<text>筛选</text>
				<img src="../../static/images/zk.png" alt="">
			</view>
		</view>
		<!-- 筛选弹出层 -->
		<u-popup v-model="show" mode="right" width="100%">
			<view class="filter-item" style="justify-content: flex-start;" @click="show = false">
				<img src="../../static/images/zk.png" style="transform: rotateZ(90deg);" alt="">
				<text>类型筛选</text>
			</view>
			<view class="filter-list">
				<view class="filter-list-item" v-for="item in filterList" :key="item">
					{{item}}
				</view>
			</view>
		</u-popup>
		<!-- 列表 -->
		<view class="service-page-list">
			<div class="service-page-list-item" v-for="(item,index) in list" @click="onClickItem(item)">
				<image class="cover" src="../../static/images/service/1.png" mode=""></image>
				<view class="body">
					<view class="title">
						{{item.title}}
					</view>
					<view class="data">
						<text>{{item.total}}</text>次百姓点单 l 已配送<text>{{item.over}}</text>场
					</view>
				</view>
				<!-- 关注按钮 -->
				<view class="follow">
					+ 关注
				</view>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [{
					cover: '',
					title: '开封市博物馆',
					total: 0,
					over: 0,
				}, {
					cover: '',
					title: '开封市大众影剧院',
					total: 8,
					over: 5,
				}, {
					cover: '',
					title: '开封市图书馆',
					total: 2,
					over: 2,
				}, {
					cover: '',
					title: '开封市文化馆',
					total: 1,
					over: 0,
				}, ],
				filterList: [
					'全部',
					'公共文化机构',
					'文化协会',
					'其它',
					'文化志愿者',
					'馆办团队',
					'社会主体',
					'民营院团',
					'国有院团',
				],
			};
		},
		methods: {
			onClickItem(item) {
				uni.navigateTo({
					url: '/pages/serviceDetail/serviceDetail'
				})
			},
		}
	}
</script>

<style lang="scss" scoped src="./serivce.scss">

</style>
